<script setup lang="ts">
import { ref, defineProps, PropType, computed } from 'vue'
import { getOrdercn } from '@/hooks/useOrderStatus'
import { useCountdownTime } from '@/hooks/useCountdownTime'
import OrderCountdown from './order-countdown.vue'
import { ApiOrder, ShopOrderItem } from '../types'
import Decimal from 'decimal.js'

const $props = defineProps({
    order: {
        type: Object as PropType<ApiOrder>,
        default() {
            return {}
        },
    },
})
const { divTenThousand } = useConvert()
const isCountdown = ref(true)

const info = computed(() => {
    return $props.order.shopOrders.map((item) => item.shopOrderItems).flat(1)
})
/**
 * useCountdownTime 订单待支付倒计时
 * @returns {*} 12:30:00
 */
const time = useCountdownTime($props.order.createTime, $props.order?.timeout.payTimeout)
/**
 * 总价格展示
 */
const tatolPirce = computed(() => {
    return info.value.reduce((pre, item) => divTenThousand(item.dealPrice).mul(item.num).add(pre), new Decimal(0))
})
/**
 * 总数量展示
 */
const tatolNum = computed(() => {
    return info.value.reduce((pre, item) => item.num + pre, 0)
})
/**
 * 导航去订单详情(未支付的订单没有拆分店铺传orderNo即可)
 */
const handleNavToDetail = () => {
    const url = `/pages/orderDetail/OrderDetail?orderNo=${$props.order.no}`
    uni.navigateTo({ url })
}
</script>

<template>
    <view class="unpay__title">
        <view class="unpay__title--name">启山智软</view>
        <order-countdown v-if="isCountdown && $props.order.status === 'UNPAID'" class="unpay__countdown" :time="time" @end="isCountdown = false" />
        <!-- <order-countdown class="unpay__countdown" :time="time" @end="isCountdown = false" /> -->
        <view v-else>{{ getOrdercn($props.order.status) }}</view>
    </view>
    <view class="unpay" @click="handleNavToDetail">
        <view :class="{ unpay__left: info.length > 1 }">
            <view v-for="(item, index) in info" :key="index" class="unpay__left-slide">
                <u-image :src="item.image" width="100%" height="100%" border-radius="30" />
                <view class="unpay__left-slide--count">{{ item.num }}</view>
            </view>
        </view>
        <view v-if="info.length === 1" class="unpay__center">
            <view class="unpay__center--name">{{ info[0].productName }}</view>
            <!-- <view class="unpay__center--specs">{{ info[0].specs.join(' ') }}</view> -->
        </view>
        <view class="unpay__right">
            <view class="unpay__right--price">{{ tatolPirce }}</view>
            <view class="unpay__right--num">共{{ tatolNum }}件</view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(unpay__title) {
    @include flex;
    justify-content: space-between;
    @include m(name) {
        font-size: 26rpx;
        font-weight: bold;
        color: #333333;
    }
}
@include b(unpay) {
    @include flex(space-between);
    @include e(left) {
        width: 80%;
        overflow-x: auto;
        @include flex(flex-start);
    }
    @include e(center) {
        flex: 1;
        height: 180rpx;
        margin-left: 30rpx;
        @include m(name) {
            font-size: 28rpx;
            font-weight: 700;
            color: #121212;
            margin-bottom: 15rpx;
        }
        @include m(specs) {
            font-size: 24rpx;
            color: #777777;
        }
    }
    @include e(left-slide) {
        width: 200rpx;
        height: 200rpx;
        position: relative;
        flex-shrink: 0;
        margin-right: 6rpx;
        @include m(count) {
            width: 60rpx;
            height: 60rpx;
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            line-height: 60rpx;
            background: rgba($color: #000000, $alpha: 0.6);
            border-radius: 30rpx 0 30rpx 0;
            position: absolute;
            right: 0;
            bottom: 0;
            &::before {
                content: '×';
                font-size: 20rpx;
                color: #fff;
            }
        }
    }
    @include e(right) {
        color: #666;
        text-align: right;
        height: 150rpx;
        @include m(price) {
            font-size: 30rpx;
            font-weight: bold;
            color: #2f2f2f;
            &::before {
                content: '￥';
                font-size: 20rpx;
                color: #2f2f2f;
            }
        }
    }
    @include e(title) {
        height: 90rpx;
        text-align: right;
        color: #f12f22;
        font-size: 24rpx;
    }
}
</style>
